Skip to content

feat: Add chart legend series filtering - #1572

Merged
kodiakhq[bot] merged 4 commits into
ClickHouse:mainfrom
alok87:feat/chart-legend-series-filtering
Jan 8, 2026
Merged

feat: Add chart legend series filtering#1572
kodiakhq[bot] merged 4 commits into
ClickHouse:mainfrom
alok87:feat/chart-legend-series-filtering

Conversation

@alok87

@alok87 alok87 commented Jan 8, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Changes

This PR implements chart legend series filtering feature as part of #1558.

Features

Chart Legend Series Filtering

  • Click on legend labels (GET, POST, PUT, etc.) to show only that series in the chart
  • Shift+Click to select multiple series for comparison
  • All legend items remain visible with clear visual feedback:
    • Selected: Bold font, thick line, full opacity
    • Non-selected: Dimmed (30% opacity) but still visible
  • Click selected item again to clear filter and show all series
  • Auto-scale Y-axis when filtering to fit only visible series data range

How It Works

Single Series:

  • Click GET → Only GET visible in graph, others hidden
  • Click GET again → All series visible

Multi-Select:

  • Click GET → Only GET visible
  • Shift+Click POST → Both GET and POST visible
  • Shift+Click GET → Only POST remains visible

Technical Changes

  • Modified HDXMultiSeriesTimeChart to support series selection with visual feedback
  • Enhanced DBTimeChart with selection state management
  • Legend renderer now always shows all series regardless of visibility
  • Y-axis auto-scales when series are filtered

Part of #1558

@changeset-bot

changeset-bot Bot commented Jan 8, 2026 •
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 01e3452

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@hyperdx/app Minor
@hyperdx/api Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercel Bot commented Jan 8, 2026

Copy link
Copy Markdown

@alok87 is attempting to deploy a commit to the HyperDX Team on Vercel.

A member of the Team first needs to authorize it.

@alok87 alok87 mentioned this pull request Jan 8, 2026
Closed
alok87 added 2 commits January 8, 2026 09:57
@alok87
feat: Add chart legend series filtering
519acc2 
- Click on legend labels to show only that series in the chart
- Shift+Click to select multiple series for comparison
- All legend items remain visible with clear visual feedback:
  - Selected: Bold font, thick line, full opacity
  - Non-selected: Dimmed (30% opacity) but still visible
- Click selected item again to clear filter and show all series
- Auto-scale Y-axis when filtering chart series to fit visible data

Part of ClickHouse#1558
@alok87
chore: Add changeset for chart legend series filtering
f54c250
@alok87
alok87 force-pushed the feat/chart-legend-series-filtering branch from c8c8d72 to f54c250 Compare January 8, 2026 04:27
@vercel

vercel Bot commented Jan 8, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
hyperdx-v2-oss-app Ready Ready Preview, Comment Jan 8, 2026 4:44pm

brandon-pereira
brandon-pereira approved these changes Jan 8, 2026
View reviewed changes

@brandon-pereira brandon-pereira left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, thanks for adding @alok87!

@kodiakhq
kodiakhq Bot merged commit 8b5e80d into ClickHouse:main Jan 8, 2026
11 of 12 checks passed
@pulpdrew pulpdrew mentioned this pull request Jan 9, 2026
Merged
kodiakhq Bot pushed a commit that referenced this pull request Jan 9, 2026
@pulpdrew
fix: Set better Chart Axis Bounds (#1585)
1e6987e 
Closes HDX-3180

# Summary

This PR makes a couple of changes to TimeChart axis bounds

1. Y Axis lower bound is now always 0 unless a series is selected (partial revert of #1572)
2. X-Axis bounds have been adjusted so that
   1. There is no longer an empty partial interval's worth of space at the end of line charts
   2. The first bar of a bar chart no longer overlaps with the Y Axis


## Before

- The first Bar in bar charts overlaps the Y Axis

<img width="1600" height="495" alt="Screenshot 2026-01-09 at 2 55 27 PM" src="https://github.com/user-attachments/assets/13087084-4847-46d5-98d3-85340101d7f3" />

- There is an empty partial (or full) interval at the end of charts

<img width="1611" height="483" alt="Screenshot 2026-01-09 at 2 55 21 PM" src="https://github.com/user-attachments/assets/a286966b-ccfa-485c-8d26-7090f75120e0" />

- Y Axis lower bound is non-zero when no series are selected

<img width="1603" height="388" alt="Screenshot 2026-01-09 at 2 38 54 PM" src="https://github.com/user-attachments/assets/4ca2743a-d484-40b1-b2e6-352aad838070" />
<img width="1623" height="373" alt="Screenshot 2026-01-09 at 2 37 26 PM" src="https://github.com/user-attachments/assets/4a8b9490-9efb-4c75-93b4-edb3321ee0a2" />

## After

- Bars fit fully within the chart domain

<img width="1610" height="503" alt="Screenshot 2026-01-09 at 2 55 42 PM" src="https://github.com/user-attachments/assets/42ab1f62-4c1e-475f-b3be-4bf6ed147dc4" />

- There is no empty space at the end of the line charts
- Y Axis lower bound is always 0 when no series are selected

<img width="1613" height="490" alt="Screenshot 2026-01-09 at 2 55 50 PM" src="https://github.com/user-attachments/assets/ed723a99-2a24-47f2-8ac8-93901f7fbf88" />
knudtty pushed a commit that referenced this pull request Apr 16, 2026
@alok87 @brandon-pereira
feat: Add chart legend series filtering (#1572)
7184c79 
## Changes

This PR implements chart legend series filtering feature as part of #1558.

## Features

**Chart Legend Series Filtering**
- Click on legend labels (GET, POST, PUT, etc.) to show only that series in the chart
- Shift+Click to select multiple series for comparison
- All legend items remain visible with clear visual feedback:
  - **Selected**: Bold font, thick line, full opacity
  - **Non-selected**: Dimmed (30% opacity) but still visible
- Click selected item again to clear filter and show all series
- Auto-scale Y-axis when filtering to fit only visible series data range

### How It Works

**Single Series:**
- Click GET → Only GET visible in graph, others hidden
- Click GET again → All series visible

**Multi-Select:**
- Click GET → Only GET visible
- Shift+Click POST → Both GET and POST visible
- Shift+Click GET → Only POST remains visible

### Technical Changes

- Modified `HDXMultiSeriesTimeChart` to support series selection with visual feedback
- Enhanced `DBTimeChart` with selection state management
- Legend renderer now always shows all series regardless of visibility
- Y-axis auto-scales when series are filtered

Part of #1558

Co-authored-by: Brandon Pereira <7552738+brandon-pereira@users.noreply.github.com>
knudtty pushed a commit that referenced this pull request Apr 16, 2026
@pulpdrew
fix: Set better Chart Axis Bounds (#1585)
1ac3a9d 
Closes HDX-3180

# Summary

This PR makes a couple of changes to TimeChart axis bounds

1. Y Axis lower bound is now always 0 unless a series is selected (partial revert of #1572)
2. X-Axis bounds have been adjusted so that
   1. There is no longer an empty partial interval's worth of space at the end of line charts
   2. The first bar of a bar chart no longer overlaps with the Y Axis


## Before

- The first Bar in bar charts overlaps the Y Axis

<img width="1600" height="495" alt="Screenshot 2026-01-09 at 2 55 27 PM" src="https://github.com/user-attachments/assets/13087084-4847-46d5-98d3-85340101d7f3" />

- There is an empty partial (or full) interval at the end of charts

<img width="1611" height="483" alt="Screenshot 2026-01-09 at 2 55 21 PM" src="https://github.com/user-attachments/assets/a286966b-ccfa-485c-8d26-7090f75120e0" />

- Y Axis lower bound is non-zero when no series are selected

<img width="1603" height="388" alt="Screenshot 2026-01-09 at 2 38 54 PM" src="https://github.com/user-attachments/assets/4ca2743a-d484-40b1-b2e6-352aad838070" />
<img width="1623" height="373" alt="Screenshot 2026-01-09 at 2 37 26 PM" src="https://github.com/user-attachments/assets/4a8b9490-9efb-4c75-93b4-edb3321ee0a2" />

## After

- Bars fit fully within the chart domain

<img width="1610" height="503" alt="Screenshot 2026-01-09 at 2 55 42 PM" src="https://github.com/user-attachments/assets/42ab1f62-4c1e-475f-b3be-4bf6ed147dc4" />

- There is no empty space at the end of the line charts
- Y Axis lower bound is always 0 when no series are selected

<img width="1613" height="490" alt="Screenshot 2026-01-09 at 2 55 50 PM" src="https://github.com/user-attachments/assets/ed723a99-2a24-47f2-8ac8-93901f7fbf88" />

This branch was successfully deployed

1 active deployment
Preview — 01e34524 Deployed Jan 8, 2026 by vercel[bot]
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@brandon-pereira brandon-pereira brandon-pereira approved these changes

Assignees

No one assigned

Labels

automerge

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@alok87 @brandon-pereira